<template>
	<view class="meteorological-container">
		<view class="meteorological-top">
			<view class="meteorological-top-search">
				<view class="search-box">
					<uni-icons type="search" size="22" style="margin-right: 14rpx;"></uni-icons>
					<input type="text" placeholder="设备名称/ID/位置" />
				</view>
				<view class="location" @click="toMap">
					<image :src="$getImageSrc('location.png')" mode="widthFix"></image>
					<text>地图</text>
				</view>
			</view>
			<view class="type-box">
				<view class="type-item">
					<picker mode="selector" :range="typeList" range-key="label" @change="handerChangeType">
						<text>设备类型</text>
						<uni-icons type="down" size="12"></uni-icons>
					</picker>
				</view>
				<view class="type-item">
					<picker mode="selector" :range="statusList" range-key="label" @change="handerChangeStatus">
						<text>设备状态</text>
						<uni-icons type="down" size="12"></uni-icons>
					</picker>

				</view>
			</view>
		</view>
		<view v-if="equipmentList.length === 0" class="no-data">
			暂无数据
		</view>
		<scroll-view v-else class="equi-box" scroll-y @scrolltolower="loadMore">
			<view class="equi-box-item box" v-for="(item,index) in equipmentList" :key="index">
				<view class="top">
					<view class="top-img">
						<image :src="$getImageSrc('equipment_detail.png')" mode="widthFix"></image>
					</view>
					<view class="top-info">
						<view class="title">
							<text>{{item.name}}</text>
							<view class="status" :class="item.equipmentState == 0 ? 'status outline' : 'status line'">
								{{item.equipmentState == 0 ? '离线' : '在线'}}
							</view>
						</view>
						<view class="size">
							{{item.equipmentCode}}
						</view>
						<view class="type-location">
							<view class="label">
								设备类型:
							</view>
							<view class="value">
								{{item.equipmentType ? item.equipmentType : '暂无数据'}}
							</view>
						</view>
						<view class="type-location">
							<view class="label">
								设备位置:
							</view>
							<view class="value ellipsis-address">
								{{item.address ? item.address : '暂无数据'}}
							</view>
						</view>
					</view>
				</view>
				<view class="btm">
					<view class="btm-more" @click="$refs.popup.open()">
						更多
					</view>
					
					<view class="btm-right">
						<view class="btm-item" @click="editName(item)">
							编辑
						</view>
						<view class="btm-item" @click="dataView(item)">
							数据查看
						</view>
						<view class="btm-item" @click="equipmentDetail(item)" style="border:1px solid #00B23C;color:#00B23C">
							设备详情
						
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 加载更多提示 -->
		<view v-if="equipmentList.length > 0" class="load-more">
			<text v-if="!hasMore">没有更多数据了</text>
		</view>
		<uni-popup ref="popup" type="bottom" :style="{ width:'100%'}">
			<view class="popup-content">
				<view class="popup-item" @click="handleReset">恢复出厂设置</view>
				<view class="popup-item" @click="handleOtherAction">诱芯</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		equipmentPage,
		getDictType,
		getDictTypeAll
	} from '../../untils/api.js'
	export default {
		data() {
			return {
				title: '',
				equipmentList: [],
				statusList: [],
				typeList: [],
				params: {
					pageNo: 1,
					pageSize: 10,
					productType: '001'
				},
				hasMore: true,
				showPopup: false
			}
		},
		onReachBottom() {
			console.log('chudi');
			if (this.hasMore) {
				this.getEquipmentList();
			}
		},
		methods: {
			 handleReset() {
				// 这里添加恢复出厂设置的逻辑，比如发送请求到后端
				console.log('执行恢复出厂设置操作');
				this.$refs.popup.close()
			},
			handleOtherAction() {
				// 这里添加“诱芯”相关的逻辑，比如跳转到相应页面
				console.log('执行诱芯相关操作');
				this.$refs.popup.close()
				uni.navigateTo({
					url:'/subpackage/insect/youxin'
				})
			},
			async getDictType() {
				const res = await getDictTypeAll('equipment_status')

				const dictDataMap = {}
				res.data.length > 0 && res.data.forEach(dictData => {
					// 获得 dictType 层级
					const enumValueObj = dictDataMap[dictData.dictType]
					if (!enumValueObj) {
						dictDataMap[dictData.dictType] = []
					}
					// 处理 dictValue 层级
					dictDataMap[dictData.dictType].push({
						value: dictData.value,
						label: dictData.label,
						colorType: dictData.colorType,
						cssClass: dictData.cssClass,
					})
				})
				this.statusList = dictDataMap['equipment_status']
				this.typeList = dictDataMap['equipment_type']
				console.log(dictDataMap, 'ssssssssssssssss')
			},
			editName(item) {
				console.log(item);
				uni.navigateTo({
					url: '/subpackage/editEquiment/index?name=' + item.name
				})
			},
			handerChangeStatus(e) {
				console.log(e);
			},
			handerChangeType(e) {
				console.log(e);
			},
			toMap() {
				uni.navigateTo({
					url: '/subpackage/mapMode/index?productType='+ this.params.productType
				})
			},
			// 获取设备列表分页
			async getEquipmentList() {
				if (!this.hasMore) return;

				uni.showLoading({
					title: '加载中'
				});

				try {
					const res = await equipmentPage(this.params);
					if (res.code === 200) {
						if (res.data.list.length > 0) {
							if (this.params.pageNo === 1) {
								this.equipmentList = res.data.list;
							} else {
								this.equipmentList = this.equipmentList.concat(res.data.list);
							}
							this.params.pageNo += 1;
						} else {
							this.hasMore = false;
						}
					}
				} catch (err) {
					console.error('请求失败', err);
				} finally {
					uni.hideLoading();
				}
			},
			loadMore() {
				if (this.hasMore) {
					this.getEquipmentList();
				}
			},
			equipmentDetail(item) {
				console.log(123);
				let url = ''
				// url = this.title == '气象监测' ? `/subpackage/equipmentDetail/index?equipmentCode=${item.equipmentCode}&id=${item.id}` : '/subpackage/snapList/index'
				url = `/subpackage/insect/index?equipmentCode=${item.equipmentCode}&id=${item.id}`
				uni.navigateTo({
					url
				})
			},
			dataView(item) {
				let url = ''
				// url = this.title == '气象监测' ? '/subpackage/dataDetail/index' : '/subpackage/mapMode/index'
				url = '/subpackage/insect/insectList?equipmentCode=' + item.equipmentCode + '&cameraCode=' + item.cameraCode
				uni.navigateTo({
					url
				})
			}
		},
		onLoad(options) {
			this.params.productType = options.productType
			this.getDictType()
			this.getEquipmentList()
			console.log(options);
			this.title = options.title
			uni.setNavigationBarTitle({
				title: options.title
			})
		}
	}
</script>

<style lang="scss" scoped>
	.meteorological-container {
		background: #F4F5F5;

		.meteorological-top {

			width: 750rpx;
			height: 178rpx;
			background: #FFFFFF;

			.meteorological-top-search {
				display: flex;
				align-items: center;
			}

			.search-box {
				margin: 12rpx 38rpx 28rpx 24rpx;
				width: 614rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				border: 1rpx solid #CACCCE;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.location {
				width: 40rpx;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					margin-top: 4rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #181D21;
					line-height: 20rpx;
				}
			}
		}

		.type-box {
			margin-left: 24rpx;
			display: flex;
			align-items: center;

			.type-item {
				width: 172rpx;
				height: 50rpx;
				background: #F4F5F5;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				margin-right: 28rpx;

				text {
					font-size: 24rpx;
					color: #535457;
					// line-height: 26rpx;
					margin-right: 4rpx;
				}
			}
		}

		.equi-box {
			height: calc(100vh - 300rpx);
			/* 减去顶部高度 */
			overflow-y: auto;

			.equi-box-item {
				overflow: hidden;
				margin-top: 18rpx;
				height: 336rpx;

				.top {
					display: flex;
					align-items: center;
					margin: 32rpx 24rpx 0 24rpx;

					.top-img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 12rpx;
						overflow: hidden;

						image {
							width: 100%;
						}
					}

					.top-info {
						height: 190rpx;
						flex: 1;
						margin-left: 24rpx;

						.title {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-weight: 500;
							font-size: 28rpx;
							color: #181D21;

							.status {
								width: 72rpx;
								height: 40rpx;

								border-radius: 8rpx;
								font-weight: 400;
								font-size: 22rpx;

								display: flex;
								justify-content: center;
								align-items: center;
							}

							.outline {
								background: #FBF0EE;
								color: #D72004;
							}

							.line {
								color: #00B23C;
								background: #F0F9F4;
							}
						}

						.size {
							font-weight: 400;
							font-size: 24rpx;
							color: #A1A3A5;
							margin-bottom: 10rpx;
						}

						.type-location {
							display: flex;
							font-weight: 400;
							font-size: 28rpx;
							color: #929496;
							margin-bottom: 4rpx;

							.ellipsis-address {
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.label {
								width: 130rpx;
							}

							.value {
								flex: 1;
							}
						}
					}
				}

				.btm {
					// margin-left: 205rpx;
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btm-right {
						display: flex;
						align-items: center;
					}
					.btm-more {
						margin-left: 24rpx;
						font-size: 26rpx;
						color: #929496;
					}
					.btm-item {
						padding: 0 24rpx;
						margin-right: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 68rpx;
						background: #FFFFFF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 1rpx solid #CACCCE;
						font-weight: 400;
						font-size: 24rpx;
						color: #181D21;
					}
				}
			}
		}
	}

	.no-data {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 根据需要调整 */
		font-size: 16px;
		color: #999;
	}

	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}
	.popup-content {
	    background-color: #fff;
	    border-top-left-radius: 20rpx;
	    border-top-right-radius: 20rpx;
	    padding: 20rpx;
	}
	.popup-item {
	    padding: 16rpx 0;
	    font-size: 24rpx;
	    color: #181D21;
	    border-bottom: 1rpx solid #CACCCE;
	}
	.popup-item:last-child {
	    border-bottom: none;
	}
</style>